<template>
    <div class="whome">
        <div class="wtop">
            <div class="wtop-top">
                <div style="height: 20px"></div>
                <div class="wtop-top1" >
                    <img class="CreatorHomeLevelImage " src="https://static.zhihu.com/heifetz/assets/V1.63bfe1eb.jpg" alt="level 1 image">
                    <div class="wtop-right">
                        <div style="margin-bottom:10px">
                            <span style="color: #0084ff;font-weight: 700;">创作等级：</span>
                            <span style="color: #0084ff">LV1</span><span style=";font-size: 12px;font-weight: 400; margin-left: 15px;color: #8590a6;">最近一次更新：</span>
                            <span style=";font-size: 12px;font-weight: 400;color: #8590a6;">2020.10.26</span>
                            <span style="margin-right: 110px;"> </span>
                            <span style=";font-size: 12px;font-weight:500; margin-left: 15px;color: #8590a6;margin-right: 5px">创作分</span>
                            <span style="color: #0084ff;font-size: 12px;font-weight: 600;margin-right: 5px">48/128</span>
                            <i class="iconfont icon-wenti-" style="color: #999999 ;font-size: 13px;margin-right: 5px"></i>
                            <span style="color: #0084ff;font-size: 12px;font-weight: 600;">LV2</span>
                        </div>
                        <el-progress :percentage="50"  :format="format"></el-progress>
                        <div style="margin-top: 20px;box-sizing: border-box;height: 40px;width: 100%;">
                            <span>已解锁权益：</span>
                            <span class="bac"><i class="iconfont icon-shuju1" style="font-size: 19px"></i></span>
                            <span class="bac2"><i class="iconfont icon-banquan-kuai" style="font-size: 19px"></i></span>
                            <span style="width: 160px;display:inline-block;padding-top:5px;box-sizing: border-box;display:inline-block;height: 35px;position:absolute;;margin-left: 10px;border-radius:5px;background: rgba(133,144,166,0.08);">
                                <span  style="color: #121212;font-size: 14px;padding-left: 14px;margin-right: 2px;">V4 将解锁权益：</span>
                                <i style="font-size: 21px;color: #8590A6;" class="iconfont icon-xingxing"></i>
                            </span>
                        </div>

                    </div>

                </div>
                <div class="wtop-bottom">
                    <div style="display: inline-block;width: 33%;float: left;text-align: center;">
                        <span style="display:inline-block;color: #999;margin-top: 20px;">阅读总数</span><br>
                        <span style="display:inline-block;margin-top: 10px;color:#121212;font-size: 26px;font-weight: 500;">50</span><br>
                        <span style="display:inline-block;margin-top: 15px;color: #999;">昨日阅读数</span>
                    </div>
                    <div style="display: inline-block;width: 33%;text-align: center">
                        <span style="display:inline-block;margin-top: 20px;color: #999;">赞同总数</span><br>
                        <span style="display:inline-block;margin-top: 10px;color:#121212;font-size: 26px;font-weight: 500;">10</span><br>
                        <span style="display:inline-block;margin-top: 15px;color: #999;">昨日赞同数</span>
                    </div>
                    <div style="display: inline-block;width: 33%;float: right;text-align: center">
                        <span style="display:inline-block;color: #999;margin-top: 20px;">关注者总数</span><br>
                        <span style="display:inline-block;margin-top: 10px;color: #121212;font-size: 26px;font-weight: 500;">30</span><br>
                        <span style="display:inline-block;margin-top: 15px;color: #999;">昨日新增关注者0</span>
                    </div>
                </div>
            </div>
            <div class="wtop-list">
                <div style="height: 50px;width: 100%;padding-top: 20px;box-sizing: border-box">
                    <span style="margin-left: 20px;align-items: center;font-weight:600;font-size: 18px;color: #121212;margin-right: 10px;">近期创作数据</span>
                    <span style="font-size: 13px;color: #999;">截止今日数据</span>
                </div>
                <div style="margin-top: 40px;display: flex" >
                    <span style="margin-top: 10px;position:absolute;width:45px;text-align:center;margin-left:20px;display: inline-block;height: 25px;background:#f6f6f6;">
                        <span style="font-size: 12px;margin-top:6px;display: inline-block">回答</span>
                    </span>
                    <div style="display: inline-block;width: 300px;height: 150px;margin-left: 90px;">
                        <span style="font-size:16px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;overflow: hidden;">如果有梦想，就一定能成功。不用人称代词做主语应该怎么翻译?</span><br>
                        <span style="font-size: 13px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;overflow: hidden;">同疑问，请问你现在懂了吗，为啥这个句子里有两个谓语动词。</span><br>
                    </div>
                    <div style="display:flex;text-align: center;float:right;flex: 1;margin-left: 5px;height: 130px;margin-top:-20px">
                        <div style="width: 20%;display:inline-block;height: 30px;">
                            <span style="display: inline-block;margin-top: 30px;font-size: 12px;color: #999;line-height: 17px;margin-bottom: 2px;">阅读</span><br>
                            <span style="display: inline-block;margin-top: 20px;font-size: 14px;line-height: 16px;color: #121212;">50</span>
                        </div>
                        <div class="rright" >
                            <span>阅读</span><br>
                            <span>50</span>
                        </div>
                        <div class="rright" >
                            <span>评论</span><br>
                            <span>50</span>
                        </div>
                        <div class="rright" >
                            <span>赞同</span><br>
                            <span>50</span>
                        </div>
                        <div class="rright" >
                            <span>收藏</span><br>
                            <span>50</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="third">
                <div class="left-menu-list" >
                    <div class="menu-list-top" style="color: rgb(133, 144, 166); font-size: 15px">
                        <i  class="iconfont icon-iconguifanbeifen"></i>
                        最近有60人看过
                    </div>
                    <div class="menu-list-top1"><p >win10系统安装VMware虚拟机时碰到如图的脚本错误该如何解决？</p></div>
                    <div class="menu-list-top2"  >
                        <i class="iconfont icon-bi"></i>
                        <input  type="text" value="写回答">
                        <span >1232</span>
                        <span>回答</span>
                        <span>.</span>
                        <span >4321</span>
                        <span>关注</span>
                    </div>
                </div>
                <div class="left-menu-list" >
                    <div class="menu-list-top" style="color: rgb(133, 144, 166); font-size: 15px">
                        <i  class="iconfont icon-iconguifanbeifen"></i>
                        最近有60人看过
                    </div>
                    <div class="menu-list-top1"><p >新更新的VMware虚拟机pro15.5不能安装苹果系统，没有unlocker怎么解决？</p></div>
                    <div class="menu-list-top2"  >
                        <i class="iconfont icon-bi"></i>
                        <input  type="text" value="写回答">
                        <span >1232</span>
                        <span>回答</span>
                        <span>.</span>
                        <span >4321</span>
                        <span>关注</span>
                    </div>
                </div>
                <div class="left-menu-list" >
                    <div class="menu-list-top" style="color: rgb(133, 144, 166); font-size: 15px">
                        <i  class="iconfont icon-iconguifanbeifen"></i>
                        最近有60人看过
                    </div>
                    <div class="menu-list-top1"><p >怎样在一个月时间顺利过六级</p></div>
                    <div class="menu-list-top2"  >
                        <i class="iconfont icon-bi"></i>
                        <input  type="text" value="写回答">
                        <span >1232</span>
                        <span>回答</span>
                        <span>.</span>
                        <span >4321</span>
                        <span>关注</span>
                    </div>
                </div>
                <div class="left-menu-list" >
                    <div class="menu-list-top" style="color: rgb(133, 144, 166); font-size: 15px">
                        <i  class="iconfont icon-iconguifanbeifen"></i>
                        最近有60人看过
                    </div>
                    <div class="menu-list-top1"><p >win10系统安装VMware虚拟机时碰到如图的脚本错误该如何解决？</p></div>
                    <div class="menu-list-top2"  >
                        <i class="iconfont icon-bi"></i>
                        <input  type="text" value="写回答">
                        <span >1232</span>
                        <span>回答</span>
                        <span>.</span>
                        <span >4321</span>
                        <span>关注</span>
                    </div>
                </div>
            </div>
            <div class="Card CreatorHomeUpgradeGuide">
                <div class="CreatorHomeUpgradeGuide-title">成长进阶指南</div>
                <div class="CreatorHomeUpgradeGuide-guideList">
                    <a class="CreatorHomeUpgradeGuide-guide" href="https://www.zhihu.com/question/312355936" target="_blank" rel="noopener noreferrer" data-za-detail-view-id="5343">
                        <img class="CreatorHomeUpgradeGuide-guideImage" src="https://static.zhihu.com/heifetz/assets/icon_guide_1.ddf567fd.png" alt="">
                        <div class="CreatorHomeUpgradeGuide-guideText"><div class="CreatorHomeUpgradeGuide-guideTitle">如何在知乎创作一篇高质量回答？</div>
                        </div>
                    </a>
                    <a class="CreatorHomeUpgradeGuide-guide" href="https://www.zhihu.com/question/19581624" target="_blank" rel="noopener noreferrer" data-za-detail-view-id="5343">
                        <img class="CreatorHomeUpgradeGuide-guideImage" src="https://static.zhihu.com/heifetz/assets/icon_guide_2.aba6c4bb.png" alt="">
                        <div class="CreatorHomeUpgradeGuide-guideText">
                            <div class="CreatorHomeUpgradeGuide-guideTitle">属于「知乎官方指南」的问答有哪些？</div>
                        </div>
                    </a>
                    <a class="CreatorHomeUpgradeGuide-guide" href="https://zhuanlan.zhihu.com/p/45072819" target="_blank" rel="noopener noreferrer" data-za-detail-view-id="5343">
                        <img class="CreatorHomeUpgradeGuide-guideImage" src="https://static.zhihu.com/heifetz/assets/icon_guide_3.ae42ad5d.png" alt="">
                        <div class="CreatorHomeUpgradeGuide-guideText">
                            <div class="CreatorHomeUpgradeGuide-guideTitle">小视频拍摄锦囊——入门必读</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Whome",
        methods:{
            format(percentage) {
                return percentage === `${percentage}%`;
            }
        }
    }
</script>

<style scoped>
    .whome{
        box-sizing: border-box;
        width:100%;
        border-radius: 3px;
        float: right;
        background: white;
    }
    .whome .wtop{
        width: 100%;
        height: 350px;
        /*border: 1px solid red;*/
    }
    .CreatorHomeLevelImage {
        height: 112px;
        pointer-events: none;
        width: 140px;
    }
    .wtop-top1{

        height: 150px;
        border-bottom:1px solid rgba(133,144,166,.12);
        width: 90%;
        margin: 0 auto;
    }
    .wtop-top1 img{
        float: top;
        position: absolute;
        margin-top: 10px;
    }
    .wtop-right{
        width: 80%;
        height: 150px;
        float: right;
        display: inline-block;
    }
    .bac{
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 30px;
        display: inline-block;
        color: #0084FF;
        border-radius: 5px;
        background: rgba(0,132,255,0.08);
    }
    .bac2{
        color: #0084FF;
        margin-left: 10px;
        width: 35px;
        height: 35px;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        display: inline-block;
        background: rgba(0,132,255,0.08);
    }
    .wtop-list{
        width: 100%;
        margin-top: 85px;
        background: white;
        height: 250px;
    }
    .rright{
        flex: 1;
        display: inline-block;
        height: 50px;
    }
    .rright span:first-of-type{
        margin-top: 30px;
        display: inline-block;
        font-size: 12px;
        color: #999;
        line-height: 17px;
        margin-bottom: 2px;
    }
    .rright span:nth-of-type(2){
        margin-top: 20px;
        display: inline-block;
        font-size: 14px;
        line-height: 16px;
        color: #121212;
    }
    .left-menu-list{
        box-sizing: border-box;
        width: 100%;
        height: 143.67px;
        border-bottom: 1px solid rgba(133,144,166,.12);
    }
    .menu-list-top{
        margin-top: 10px;
    }
    .menu-list-top i{
        background-color: rgba(0,132,255,.08);
        border-radius: 3px !important;
        margin-right: 5px;
    }
    .menu-list-top1{
        margin-top: 15px;
        font-weight: 600;
        line-height: 30px;
        font-size: 17px;
    }
    .menu-list-top2{
        margin-top: 20px;

    }
    .menu-list-top2 i{
        position: absolute;
        z-index: 10;
        margin-left: 10px;
        color: white;
        margin-top: 5px;
    }
    .menu-list-top2 span{
        color: #8590a6;
        font-size: 14px;
        margin-left: 5px;
    }
    .menu-list-top2 span:first-of-type{
        margin-left: 15px;
    }
    .menu-list-top2 input{
        width: 96px;
        box-sizing: border-box;
        height: 28px;
        outline: none;
        border: none;
        background: #0084ff;
        line-height: 26px;
        border-radius: 3px;
        text-align: center;
        color: #fff;
        padding-left: 5px;
    }
    .wtop .third{
        padding-top: 10px;
        padding-left:10px;
        background: white;
        width: 100%;
        margin-top: 10px;
    }
    .CreatorHomeUpgradeGuide{
        margin-bottom: 16px;
        padding-top: 10px;
        padding-left: 10px;
        background: white;
        width: 100%;
        height: 140px;
        margin-top: 10px;
    }
    .CreatorHomeUpgradeGuide-title {
        display: -ms-flexbox;
        display: flex;
        font-size: 18px;
        margin-bottom: 24px;
        font-weight: 600;
        -webkit-box-align: center;
        align-items: center;
        color: #121212;
    }
    .CreatorHomeUpgradeGuide-guideList {

        display: flex;
    }
    .CreatorHomeUpgradeGuide-guide {
        -webkit-box-align: center;
        align-items: center;
        flex-basis: 0;
        -webkit-box-flex: 1;
        display: flex;
        flex-grow: 1;
        margin-right: 24px;
    }
    .CreatorHomeUpgradeGuide-guideImage {
        height: 58px;
        margin-right: 10px;
        -o-object-fit: cover;
        object-fit: cover;
        pointer-events: none;
        width: 58px;
    }
    .CreatorHomeUpgradeGuide-guideTitle {
        font-size: 15px;
        line-height: 21px;
        color: #121212;
    }
</style>
